<template>
  <div class="container">
    <custom-header title="巡检场景详情"></custom-header>
    <div class="content">
      <div class="top">
        <div class="item_list">
          <div class="item"
               v-for="(item,index) in topList"
               :key="index">
            {{ item.label }}： <span class="prop">{{ topValue[item.prop] }}</span>
          </div>
        </div>
      </div>
      <div class="table">
        <div class="title">
          关联任务：
        </div>
        <customer-table :tableInfo="tableInfo"></customer-table>
      </div>
      <div class="map">
        <div class="card">
          <div class="title">
            场景地图：
          </div>
          <div class="map_content">

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import customHeader from "@/pages/Robot/components/CustomHeader.vue";
import customerTable from "@/pages/Robot/components/CustomerTable.vue";

export default {
  name: "patrolSceneManagementDetails",
  components: {
    customHeader,
    customerTable
  },
  data () {
    return {
      topList: [
        {
          label: "场景名称",
          prop: "name"
        },
        {
          label: "场景编号",
          prop: "number"
        },
        {
          label: "场景下任务数",
          prop: "numberOfTasks"
        },
      ],
      topValue: {
        name: "场景1",
        number: "CJ001",
        numberOfTasks: "5"
      },
      tableInfo: {
        column: [
          {
            prop: "index",
            type: "index",
            width: "50",
          },
          {
            label: "场景编码",
            prop: "number",
          },
          {
            label: "场景名称",
            prop: "name",
          },
          {
            label: "任务名称",
            prop: "taskName",
          },
          {
            label: "巡检计划开始时间",
            prop: "planStartTime",
          },
          {
            label: "预计完成时间",
            prop: "planEndTime",
          },
          {
            label: "实际时长",
            prop: "actualTime",
          },
          {
            label: "任务状态",
            prop: "taskStatus",
          },
        ],
        data: [
          {
            number: "CJ001",
            name: "场景1",
            taskName: "任务1",
            planStartTime: "2020-01-01 12:00:00",
            planEndTime: "2020-01-01 12:00:00",
            actualTime: "2020-01-01 12:00:00",
            taskStatus: "已完成",
          },
          {
            number: "CJ001",
            name: "场景1",
            taskName: "任务1",
            planStartTime: "2020-01-01 12:00:00",
            planEndTime: "2020-01-01 12:00:00",
            actualTime: "2020-01-01 12:00:00",
            taskStatus: "已完成",
          },
          {
            number: "CJ001",
            name: "场景1",
            taskName: "任务1",
            planStartTime: "2020-01-01 12:00:00",
            planEndTime: "2020-01-01 12:00:00",
            actualTime: "2020-01-01 12:00:00",
            taskStatus: "已完成",
          },
          {
            number: "CJ001",
            name: "场景1",
            taskName: "任务1",
            planStartTime: "2020-01-01 12:00:00",
            planEndTime: "2020-01-01 12:00:00",
            actualTime: "2020-01-01 12:00:00",
            taskStatus: "已完成",
          },
        ],
      },
    };
  },
}
</script>

<style lang="scss" scoped>
.container {
  .content {
    padding: 24px;

    .top {
      padding: 8px 0 31px;
      border-bottom: 1px solid #e6e6e6;

      .item_list {
        display: flex;

        .item {
          width: 250px;

          .prop {
            font-size: 14px;
            color: rgba(0, 0, 0, 0.85);
            font-weight: bold;
          }
        }
      }
    }

    .map {
      .card {
        width: 50%;

        .map_content {
          height: 261px;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-image: url("../../../assets/robot/map2.png");
        }
      }
    }

    .title {
      padding: 18px 0 23px;
      font-size: 13px;
      color: #595959;
    }
  }
}
</style>
